<template>
  <div>
    <footer class="bottom_all">
      <div class="shouye_ico">
        <router-link to="/shouye" class="router_style"
          ><span class="iconfont icon-elment"></span> <i>首页</i>
        </router-link>
      </div>
      <div class="zhenxiang_ico">
        <router-link to="/zhengxiang" class="router_style">
          <span class="iconfont icon-fantuan"></span>
          <i>真香</i>
        </router-link>
      </div>
      <div class="dindan_ico">
        <router-link
          v-bind:to="{ name: 'Dindan', params: { canshu1: '路由传参' } }"
          class="router_style"
        >
          <span class="iconfont icon-baitiao"></span> <i>订单</i></router-link
        >
      </div>
      <div class="wode_ico">
        <router-link to="/wode" class="router_style">
          <span class="iconfont icon-wode1"></span>
          <i>我的</i>
        </router-link>
      </div>
    </footer>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
@import url("../iconfont/iconfont.css");
.bottom_all {
  width: 100%;
  height: 0.5rem;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #f7f7f7;
  border-top: 1px solid #efefef;
  z-index: 10;
}
.bottom_all > div {
  width: 0.5rem;
  height: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

span {
  font-size: 0.24rem !important;
}
i {
  font-size: 0.12rem;
  color: #92989c;
}
.router_style {
  width: 0.5rem;
  height: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #545454;
}
</style>